<template>
	<view >
		<view class="padding-20">
			<SearchBox bgColor="#F5F7FB" :showButton="true" class="m-t-30"/>
		</view>
		<view class="nav-scroll flex" style="padding-bottom: 20rpx;">
			<block v-for="(item, index) in navList" :key="index">
				<NavItem :dataItem="item" />
			</block>
		</view>
		<wei-dropdown-menu :data="menu" :value="menuValue" :popupSytle="{ borderRadius: '0 0 10px 10px', overflow: 'hidden' }" @change="onChange" />
		<view v-if="shopList.length" class="shop-list">
			<block v-for="(item, index) in shopList" :key="index">
				<ShopItem :dataItem="item" />
			</block>
		</view>
		<empty v-if="loadStatus != 'loading' && !shopList.length" :show="false"/>
		<view v-else style="padding-bottom: 30rpx;">
			<uni-load-more color="#3FA897" iconType="circle" :status="loadStatus" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import SearchBox from '@/components/house/tabbar/index/searchBox/search-box.vue';
	import NavItem from '../components/navItem/index.vue';
	import ShopItem from '../components/shopItem/index.vue';
	// import { menuData } from './menuData.js';
	import { navList } from '@/config/config'
	import empty from '@/components/empty/index.vue';
	import { onReachBottom } from '@dcloudio/uni-app';
	import { ref, getCurrentInstance, onMounted, reactive, computed } from 'vue';
	
	const { proxy } = getCurrentInstance() as any;
	
	const menuValue = ref({});
	
	const loadStatus = ref('loading');
	
	const shopList = ref([]);
	
	const serviceCategory = ref([
		
	]);
	
	const menu = computed(() => {
		return [
			{ 
				name: 'whole', 
				title: '全部', 
				options: [
					{ label: "全部", value: 0 },
					{ label: "平台精选", value: 1 },
					{ label: "企业店铺", value: 2 },
					{ label: "个人小店", value: 3 },
				]
			},{ 
				name: 'categoryId', 
				title: '全部服务', 
				options: [
				    { label: "全部服务", value: 0 },
				    ...serviceCategory.value
			    ] ,
			},
			{ 
				name: 'sortType', 
				title: '排序',
				options: [
					{ label: "全部", value: 0 },
					{ label: "距离优先", value: 1 },
					{ label: "好评优先", value: 2 },
				]
			}
		]
	})
	
	const params = ref({
		pageNum: 1,
		pageSize: 5,
		latitude: "1",
		longitude: "1",
		categoryId: "",
		distanceSort: false,
		reviewSort: true,
	})
	
	function onChange(e) {
		menuData.value = [
		 { name: 'whole', title: '全部', options: [
			{ label: "全部", value: null },
			{ label: "平台精选", value: "1" },
			{ label: "企业店铺", value: "2" },
			{ label: "个人小店", value: "3" },
		 ] },
		 { name: 'services', title: '全部服务', treeSelect: true,options: [
			{ label: "全部服务", value: null, children: [{ label: '全部', value: null }] },
			{ label: "护士上门", value: "1", 
				children: [ 
					{ label: "全部", value: null},
					{ label: "打针采血",value: "1_1"},
					{ label: "上门换药",  value: "1_2"},
				],
			},
			{ label: "陪诊服务", value: "2",
				children: [ 
					{ label: "全部", value: null},
					{ label: "护士陪诊", value: "2_1"},
					{ label: "院内陪诊", value: "2_2"},
				],
			},
		] },
		
		{ name: 'sort', title: '排序',options: [
			{ label: "全部", value: null },
			{ label: "距离优先", value: "1" },
			{ label: "好评优先", value: "2" },
		 ]}
	];
		params.value.pageNum = 1;
		params.value = {...params.value, ...e.value};
		loadData(true);
	}
	
	const getcategoryList = () => {
		let url = proxy.$API.getcategoryList
		proxy.$UNIHTTP.getData(url).then((res) => {
			if (res.code == 0) {
				serviceCategory.value = res.data.map(item => ({label: item.name, value: item.id}));
			} else if (res.msg) {
				uni.showToast({
					title: res.msg, //显示的文字 
					icon:'none'
				})
			}
		})
	}
	
	const loadData = (isRefresh = false) => {
		if(isRefresh){
			shopList.value.length = 0;
		}
		loadStatus.value = 'loading';
		const url = proxy.$API.getMerchant;
		proxy.$UNIHTTP.postData(url, params.value).then(res => {
			if(res.code != 1){
				// 获取数据失败时，页数回滚到上一页，防止多次触底页数一直叠加
				params.value.pageNum = (params.value.pageNum != 1 ? params.value.pageNum - 1 : 1);
				return uni.showToast({icon:'none',title: '数据加载失败'});
			}
			shopList.value = isRefresh ? res.data.list : [...shopList.value, ...res.data.list];
			if(res.data.total == shopList.value.length){
				return loadStatus.value = 'no-more';
			}
			loadStatus.value = 'more';
		}).catch(err => {
			// 获取数据失败时，页数回滚到上一页，防止多次触底页数一直叠加
			params.value.pageNum = (params.value.pageNum != 1 ? params.value.pageNum - 1 : 1);
		})
	}
	
	onReachBottom(() => {
		if(loadStatus.value != 'no-more'){
			params.value.pageNum = params.value.pageNum + 1;
			loadData();
		}
	})
	
	onMounted(() => {
		getcategoryList();
		loadData();
	})
	
</script>

<style scoped lang="scss">
	::-webkit-scrollbar {
	    width: 0;
	    height: 0;
	    background-color: transparent;
	}
	.nav-scroll {
		margin-top: 50rpx;
		overflow-x: scroll;
	}
	.filter-box {
		padding: 20rpx 40rpx;
		border-bottom: 1rpx solid #E5E5E5;
	}
	.shop-list {
		margin-top: 10rpx;
	}
</style>
